<template id="temp">
  <div>
    <div class="one">
      <div class="header">
        <div class="zhanwei"></div>
        <div class="top">
          <h2>火车票预订</h2>
          <h4 style="margin-top: 10px">便捷购票，服务您的每一次出行</h4>
        </div>
        <div class="bottom">
          <!-- 城市 -->
          <div class="box1">
            <div class="left" @click="site">
              <div class="leftOne" v-show="leftOne">{{ city }}</div>
              <div class="leftTwo" v-show="leftTwo">{{ citys }}</div>
              <hr />
            </div>
            <div class="count">
              <nut-icon name="retweet" @click="cut"></nut-icon>
            </div>
            <div class="right" @click="sites">
              <div class="leftOne" v-show="leftOne">{{ citys }}</div>
              <div class="leftTwo" v-show="leftTwo">{{ city }}</div>
              <hr />
            </div>
          </div>
          <!-- 时间 -->
          <div class="box2" @click="show = true">
            <span class="ticket_two_one">{{ date }}</span>
            <span class="ticket_two_two"
              >周{{ day }}<span v-show="today">(今天)</span></span
            >
            <hr />
          </div>

          <!-- 高铁/动车 -->
          <div class="box3">
            <span style="color: #888">只看高铁/动车</span>
            <div class="flex"></div>
            <span><nut-switch v-model="checked" /></span>
          </div>
          <div class="box4"><button @click="query">搜索</button></div>
        </div>
      </div>
    </div>
    <div class="main">
      <!-- 轮播图 -->
      <div class="slideshow">
        <nut-swiper
          :init-page="page"
          :pagination-visible="true"
          pagination-color="#426543"
          auto-play="3000"
        >
          <nut-swiper-item>
            <img src="../../../public/img/tu.jpg" alt="" />
          </nut-swiper-item>
          <nut-swiper-item>
            <img src="../../../public/img/tu.jpg" alt="" />
          </nut-swiper-item>
          <nut-swiper-item>
            <img src="../../../public/img/tu.jpg" alt="" />
          </nut-swiper-item>
          <nut-swiper-item>
            <img src="../../../public/img/tu.jpg" alt="" />
          </nut-swiper-item>
        </nut-swiper>
      </div>
      <!-- 出行快讯 -->
      <div class="flash">
        <div class="topone">
          <h3>&ensp;出行快讯</h3>
          <div class="box1"></div>
          <span @click="consult">更多>&ensp; </span>
        </div>
        <div class="heidd">
          <div class="bottomone">
            <div class="box1" v-for="(v, i) in datas" :key="i">
              <div class="box1one" style="font-size: 26px; color: red">
                {{ v.index }}
              </div>
              <div class="box1two">
                <div class="box1twoOne">{{ v.title }}</div>
                <p>{{ v.from }}{{ v.date }}</p>
              </div>
              <div class="box1there">
                <img :src="v.imgSrc" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 选择日期 -->
    <van-calendar
      v-model:show="show"
      :show-confirm="false"
      @confirm="onConfirm"
    />
  </div>
</template>
<script >
import { ref, reactive, toRefs } from "vue";
import router from "../../router";
// 获取公告
import { api } from "../../api/api";
export default {
  setup() {
    // 日期
    const state = reactive({
      date: "",
      isVisible: false,
      // 地址存储
      city: JSON.parse(localStorage.getItem("city")),
      citys: JSON.parse(localStorage.getItem("citys")),
      // 地址城市
      leftTwo: false,
      leftOne: true,
    });
    const openSwitch = (param) => {
      state[`${param}`] = true;
    };
    const closeSwitch = (param) => {
      state[`${param}`] = false;
    };
    const setChooseValue = (param) => {
      state.date = param[3];
    };
    // 跳转咨询
    function consult() {
      console.log(1);
      router.push("/consult");
    }
    // 跳转地址
    function site() {
      router.push("/site");
    }
    // 跳转地址
    function sites() {
      router.push("/sites");
    }
    // 跳转地址
    function query() {
      router.push("/query");
    }
    // 获取公告
    const datas = reactive([]);
    api.trip.gener().then((res) => {
      Object.assign(datas, res.data);
    });
    // 点击互换
    function cut() {
      state.leftTwo = !state.leftTwo;
      state.leftOne = !state.leftOne;
    }
    //日期
    const date = ref("");
    let day = ref("");
    const show = ref(false);
    const today = ref(true);
    const formatDate = (date) =>
      `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
    const onConfirm = (value) => {
      if (value.getDate() == new Date().getDate()) {
        today.value = true;
      } else {
        today.value = false;
      }
      if (value.getDay() == 1) {
        day.value = "一";
      } else if (value.getDay() == 2) {
        day.value = "二";
      } else if (value.getDay() == 3) {
        day.value = "三";
      } else if (value.getDay() == 4) {
        day.value = "四";
      } else if (value.getDay() == 5) {
        day.value = "五";
      } else if (value.getDay() == 6) {
        day.value = "六";
      } else {
        day.value = "日";
      }
      show.value = false;
      date.value = formatDate(value);
    };
    // 开关
    const checked = ref(true);
    //默认执行
    onConfirm(new Date());
    return {
      // 日期
      ...toRefs(state),
      setChooseValue,
      openSwitch,
      closeSwitch,
      // 开关
      checked,
      // 咨询
      consult,
      // 城市
      site,
      sites,
      cut,
      // 公告数据
      datas,
      date,
      day,
      show,
      // 城市
      formatDate,
      onConfirm,
      today,
      // 车票
      query,
    };
  },
};
</script>
<style lang="scss" scoped>
.one {
  width: 100%;
  height: 360px;
}
.header {
  width: 100%;
  background: #1ba9ba;
  height: 240px;
  border-radius: 0px 0px 70px 70px;
  position: relative;
}

.zhanwei {
  width: 100%;
  height: 40px;
}

.top {
  width: 86%;
  color: #fff;
  height: 50px;
  margin-left: 7%;
}

.bottom {
  width: 94%;
  background-color: white;
  box-shadow: 0 1px 7px #edeef1;
  margin-left: 3%;
  height: 230px;
  position: absolute;
  margin-top: 30px;
  border-radius: 10px;
  // 地址
  .box1 {
    width: 100%;
    display: flex;
    height: 1.6rem;
    line-height: 1.2rem;
    font-size: 0.46rem;
    .left {
      width: 35%;
      margin-left: 5%;
      text-align: center;
    }
    .count {
      width: 20%;
      text-align: center;
    }
    .right {
      width: 35%;
      margin-right: 5%;
      text-align: center;
    }
  }
  .nut-cell {
    box-shadow: none;
    height: 0.5rem;
  }
  // 日期
  .box2 {
    width: 90%;
    height: 1.1rem;
    margin-left: 5%;
    font-size: 0.4rem;
  }
  .box3 {
    width: 90%;
    height: 0.8rem;
    line-height: 0.8rem;
    margin-left: 5%;
    display: flex;
    .flex {
      flex: 1;
    }
  }
  .box4 {
    width: 90%;
    margin-left: 5%;
    margin-top: 3%;
    button {
      width: 100%;
      background: orange;
      color: white;
      border: none;
      height: 1rem;
      border-radius: 7px;
      font-size: 0.4rem;
    }
  }
}
.main {
  width: 100%;
  .slideshow {
    width: 94%;
    margin-left: 3%;
    border-radius: 10px;
    .nut-swiper {
      width: 100%;
      height: 2rem;
      border-radius: 10px;
    }
    img {
      width: 100%;
      height: 100%;
      border-radius: 10px;
    }
  }
  .flash {
    width: 94%;
    margin-left: 3%;
    background: white;
    height: 8.2rem;
    margin-top: 3%;
    border-radius: 0.2rem;
    // position: relative;
    .topone {
      width: 100%;
      display: flex;
      height: 1rem;
      line-height: 1rem;
      background: white;
      border-bottom: 1px solid #ccc;
      .box1 {
        flex: 1;
      }
    }
  }
  // 数据
  .heidd {
    width: 100%;
    height: 87%;
    overflow: auto;
    .bottomone {
      width: 100%;
      .box1 {
        width: 100%;
        display: flex;
        margin-top: 2%;
        .box1one {
          margin-left: 2%;
        }
        .box1two {
          margin-left: 2%;
          .box1twoOne {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            overflow: hidden;
            font-size: 0.42rem;
          }
        }
        .box1there {
          flex: 1;
          text-align: right;
          margin-right: 2%;
          img {
            width: 2rem;
            height: 1.2rem;
          }
        }
      }
    }
  }
}
</style>